<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
    <p:dialog id="messages"
              header="Change Password Dialog"
              widgetVar="dlg_password"
              modal="true"
              resizable="false" >
        <div style="padding: 10px;">
            <h3>Change your password</h3>
            <p>
                <strong>Attention</strong> by Admin<br />
		In the first time using the system, you should be changed default password to protect your account.
            </p>
            <h:form id="frm-password">
                <div style="padding: 5px 0px 15px 0px;
                     border-top: 1px dotted #CCC;
                     border-bottom: 1px dotted #CCC;">
                    <h4>New Password</h4>
                    <fieldset>
                        <p:password id="txtPassword" value="#{accountMB.password}"
                                    binding="#{passwordComponent}"
                                    styleClass="text-input remove" feedback="true"
                                    required="true"
                                    requiredMessage="Password is required"
                                    validator="#{accountMB.validatePassword}">
                        </p:password>
                        <h:message for="txtPassword" id="msgPassword"
                                   infoClass="input-notification success png_bg"
                                   warnClass="input-notification attention png_bg"
                                   errorClass="input-notification error png_bg"/>
                    </fieldset>
                    <h4>Confirm Password</h4>
                    <fieldset>
                        <p:password id="txtConfirm" value="#{accountMB.password}"
                                    styleClass="text-input remove"
                                    feedback="true"
                                    validator="#{accountMB.validateConfirmPassword}">
                            <f:attribute name="passwordComponent" value="#{passwordComponent}"/>
                        </p:password>
                        <h:message for="txtConfirm" id="msgConfirm"
                                   infoClass="input-notification success png_bg"
                                   warnClass="input-notification attention png_bg"
                                   errorClass="input-notification error png_bg"/>
                    </fieldset>
                </div>
                <fieldset style="padding-top: 15px;">
                    <h:commandButton value="Save Changes" 
                                     styleClass="button"
                                     action="#{accountMB.changePass}"/>
                </fieldset>
            </h:form>
        </div>
        <p:ajax event="close" update="growl" listener="#{accountMB.handleClose}"/>
    </p:dialog><!-- End #messages -->

    <script type="text/javascript" >
        $(document).ready(function () {
          var param = '#{sessionScope.accountMB.account.isChangedPassword}';
          if(param == "false")
            dlg_password.show();
        });
        $('.remove input').removeClass('ui-inputfield');
    </script>
</ui:composition>

